<template>
  <div>
    <div id="container">
      <div id="hd"></div>
      <div id="bd">
        <div id="main">
          <base-table v-bind="table" @getInstance="getInstance">
            <div class="add tool-btn">
              <span class="insert-icon tool-icon"></span>
              <span>新增</span>
            </div>
            <div class="delete tool-btn">
              <span class="delete-icon tool-icon"></span>
              <span>多选删除</span>
            </div>
          </base-table>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import BaseTable from "ASSETS_CMP/utils/BaseTable.vue";

export default {
  name: "deviceList",
  data() {
    return {
      tableInstance:{},
      table: {
        instance:{},
        htable: {
          thead: [],
          tbody: [],
          width: 1050,
          oper: [
            {
              label: "修改",
              icon_class: "update-icon",
              callback: function(e,ele,data) {
                console.log("修改",ele,data);
                
                e.stopPropagation();
              }
            },
            {
              label: "删除",
              icon_class: "delete-icon",
              callback: function(e) {
                console.log("删除");
                e.stopPropagation();
              }
            }
          ],
          row: 10.3,
          sort: function(type, name) {
            console.log("当前排序的类型:", type, "当前排序的字段:", name);
          }
        },
        hpagination: {
        back: function(currentPage) {
          console.log("back", currentPage);
        },
        next: function(currentPage) {
          console.log("next", currentPage);
        },
        item: function(ele, currentPage) {
          console.log("item", ele, currentPage);
        },
        pageTotal: 5,
        currentPage: 1
      }
      },
     
    };
  },
  methods:{
   getInstance(instance){
     this.tableInstance = instance
   }
  },
  created() {
    this.table.htable.tbody = [
      [
        "1",
        "液压",
        "液压机",
        "K-v",
        "dd-c5",
        "2019-12-11",
        this.table.htable.oper
      ],
      [
        "1",
        "液压",
        "液压机",
        "K-v",
        "dd-c5",
        "2019-12-11",
        this.table.htable.oper
      ],
      [
        "1",
        "液压",
        "液压机",
        "K-v",
        "dd-c5",
        "2019-12-11",
        this.table.htable.oper
      ],
      [
        "1",
        "液压",
        "液压机",
        "K-v",
        "dd-c5",
        "2019-12-11",
        this.table.htable.oper
      ],
      [
        "1",
        "液压",
        "液压机",
        "K-v",
        "dd-c5",
        "2019-12-11",
        this.table.htable.oper
      ],
      [
        "1",
        "液压",
        "液压机",
        "K-v",
        "dd-c5",
        "2019-12-11",
        this.table.htable.oper
      ],
      [
        "1",
        "液压",
        "液压机",
        "K-v",
        "dd-c5",
        "2019-12-11",
        this.table.htable.oper
      ],
      [
        "1",
        "液压",
        "液压机",
        "K-v",
        "dd-c5",
        "2019-12-11",
        this.table.htable.oper
      ],
      [
        "1",
        "液压",
        "液压机",
        "K-v",
        "dd-c5",
        "2019-12-11",
        this.table.htable.oper
      ],
      [
        "1",
        "液压",
        "液压机",
        "K-v",
        "dd-c5",
        "2019-12-11",
        this.table.htable.oper
      ]
    ];
    this.table.htable.thead = [
      {
        label: "ID",
        name: "id",
        width: 150,
        sort: true,
        fixedColumn: "left"
      },
      {
        label: "设备类型",
        name: "deviceType",
        width: 200,
        sort: true
      },
      {
        label: "设备名称",
        name: "deviceName",
        width: 150
      },
      {
        label: "品牌",
        name: "brand",
        width: 150
      },
      {
        label: "型号",
        name: "type",
        width: 150
      },
      {
        label: "出厂日期",
        name: "dataProduct",
        width: 200
      },
      {
        label: "操作",
        name: "oper",
        width: 150,
        //sortable: false,
        fixedColumn: "right"
      }
    ];
  },
  mounted(){
    //更换数据
    setTimeout( ()=>{
      let data = [
      [
        "1",
        "液压",
        "液压机",
        "K-v",
        "dd-c5",
        "2019-12-11",
        this.table.htable.oper
      ],
      [
        "2",
        "液压",
        "液压机",
        "K-v",
        "ddds-c5",
        "2019-12-11",
        this.table.htable.oper
      ]
    ];
    this.tableInstance.setTableList(data)
    console.log('更换数据')
    
    },2000)
    setTimeout( ()=>{
      //this.tableInstance.getCheckedList() 获取当前选中的列表 ,包含元素节点 和 数据
       console.log('选中列表',this.tableInstance.getCheckedList())
    },4000)
  },
  components: {
    BaseTable
  }
};
</script>
<style lang="css">
#main {
  width: auto;
  height: auto;
  margin: 20px;
}

.table-tool {
  width: 1052px;
  margin-bottom: 10px;
}
</style>